import { useAppSelector, useAppDispatch } from "./hooks";

// 引入动作创建函数
import { increment, decrement, setCount } from "./store/modules/counter";
import { add } from "./store/modules/task";

export default function App() {
  const dispatch = useAppDispatch();
  const count = useAppSelector((state) => state.counter.count);
  const tasks = useAppSelector((state) => state.task.raws);

  return (
    <div>
      <h1>App</h1>
      <p>COUNT: {count}</p>

      <button onClick={() => dispatch(increment())}>自增</button>

      <button onClick={() => dispatch(decrement())}>自减</button>

      <button onClick={() => dispatch(setCount(100))}>set 100</button>

      <button onClick={() => dispatch(setCount(200))}>set 200</button>

      <hr />
      <button onClick={() => dispatch(add("睡觉"))}>新增 睡觉</button>
      <button onClick={() => dispatch(add("打豆豆"))}>新增 打豆豆</button>
      <hr />
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}
